<!DOCTYPE html>
{% load static %}
<html>
<head>
    <title>文章编辑页</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/edit.css' %}">
</head> 
<body>
    <form method="POST" action="" id="edit">
        {% csrf_token %}
        <div class="editor">
            <div class="operations">
                <style>
                    .operations {
                        display: grid;
                        place-items: center;
                    }
                    #tags {
                        width: 30%;
                    }
                </style>
                {{ form.title }}
                {{ form.tags }}  
            </div>
            <div class="abstract">
                <!-- <textarea  id="abstract"></textarea> -->
                {{ form.abstract }}
            </div>
            <!-- <textarea class="input" id="input"></textarea> -->
            {{ form.content }}
            <div class="output" id="output"></div>
            <div class="footer">
                <button class="sub_btn" type="submit" name="submit" value="publish" style="cursor: pointer">发表</button>
                <button class="sub_btn" type="submit" name="submit" value="draft" style="cursor: pointer">保存草稿</button>
            </div>
        </div>
    </form>
</body>
<script src="{% static 'js/marked.min.js' %}"></script>

<script>
    function debounce(fn, delay = 200) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(fn.bind(this, ...arguments), delay);
    }
    }
    input.value = '# Hello, world!!!'
    output.innerHTML = marked.parse(input.value)
    input.oninput = debounce((e) => {
    input.value = e.target.value
    output.innerHTML = marked.parse(input.value)
    }, 500)
</script>

</html>